<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="年度" prop="year">
                <el-date-picker
                v-model="queryParams.year"
                type="year"
                format="yyyy"
                value-format="yyyy"
                placeholder="选择种植年度">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['waterDistribution:wrPlanDayChan:export']"
                >导出</el-button>
            </el-form-item>
        </el-form>

        <!-- <div class="tb_left" >年度限额总指标：<span class="hj_cl_blue">48837m³</span></div> -->
        <div class="tb_title" v-html="tableTitle"></div>
        <div class="tb_dw" >流量：<span class="hj_cl_blue">(m³/s)</span> 水量：<span class="hj_cl_blue">m³</span></div>

        <el-table v-loading="loading" stripe :data="wrPlanDayRiseList" :header-cell-style="tableHeaderColor" :span-method="objectSpanMethod">
            <el-table-column label="年度" fixed="left" align="center" prop="year" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="" >{{ scope.row[0]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="灌季" fixed="left" align="center" prop="quarter" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-show="scope.$index != 47" class="" >{{ scope.row[1]}}</span>
                    <span v-show="scope.$index == 47" class="hj_cl" >{{ scope.row[1]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="月" fixed="left" align="center" prop="month" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row[2]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="渠道各旬" fixed="left" align="center" prop="dt" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row[3]}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="各断面" align="center" prop="dt1" show-overflow-tooltip>
                <el-table-column label="东岸大渠" align="center" prop="type1" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span class="hj_cl" >{{ scope.row[4] == '0.00'?'':scope.row[4] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="哈拉塔勒干渠" align="center" prop="type2" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span class="hj_cl" >{{ scope.row[5] == '0.00'?'':scope.row[5] }}</span>
                    </template>
                </el-table-column>
            </el-table-column> -->
            <el-table-column label="总水量" align="center" prop="dayW" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row[4] == 'null'?'--':scope.row[4] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { caleCroVol } from "@/api/waterDistribution/wrPlanDayChan";
    // import { getYears } from "@/api/waterPrice/wrFeePay";

    export default {
        name: "wrPlanDayChan",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                rowSpanArrYear: [],
                rowSpanArrQuarter: [],
                rowSpanArrMonth: [],
                positionYear: 0,
                positionQuarter: 0,
                positionMonth: 0,
                // 年份选择
                yearList: [],
                // 断面用水日计划表格数据
                wrPlanDayRiseList: [],
                // 弹出层标题
                title: "",
                // 列表标题行内容
                tableTitle: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    // pageNum: 1,
                    // pageSize: 10,
                    year: null,
                    chanCd:'CHA001000000000'
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询断面用水日计划列表 */
            getList() {
                this.loading = true;
                if(this.queryParams.year == null) {
                    var day = new Date();
                    var nowYear = day.getFullYear().toString();
                    this.queryParams.year = nowYear;
                }
                this.tableTitle = `富蕴县各灌区计量节点` + this.queryParams.year + `年1月-12月限额用水计划分配表及过程计划`;
                caleCroVol(this.queryParams).then(response => {
                    this.wrPlanDayRiseList = response.data;
                    this.total = response.total;
                    this.loading = false;
                    this.getRowSpan(this.wrPlanDayRiseList);
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 导出按钮操作 */
            handleExport() {
                this.queryParams.tableTitle = this.tableTitle;
                this.download('distribute/WiGetvolM/export2', {
                    ...this.queryParams
                }, `富蕴县各灌区计量节点` + this.queryParams.year + `年1月-12月限额用水计划分配表及过程计划.xlsx`)
            },
            /** 修改table header的背景色 */
            tableHeaderColor(row, rowIndex) {
                return 'background-color: #e6f4f8; font-weight: 700px !important;';
            },
            // 合并行
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    const _row = this.rowSpanArrYear[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row, //行
                        colspan: _col //列
                    };
                }
                if (columnIndex === 1) {
                    const _row1 = this.rowSpanArrQuarter[rowIndex];
                    const _col1 = _row1 > 0 ? 1 : 0;
                    // 年总水量
                    if(rowIndex == 47) {
                        return {
                            rowspan: 1, //行
                            colspan: 3 //列
                        };
                    }else {
                        return {
                            rowspan: _row1, //行
                            colspan: _col1 //列
                        };
                    }
                }
                if (columnIndex === 3) {
                    //小计
                    // if(rowIndex == 12 || rowIndex == 29 || rowIndex == 46 || rowIndex == 47) {
                    //     return {
                    //         rowspan: 0, //行
                    //         colspan: 0 //列
                    //     };
                    // }else {
                        return {
                            rowspan: 1, //行
                            colspan: 1 //列
                        };
                    // }
                }
                if (columnIndex === 2) {
                    const _row2 = this.rowSpanArrMonth[rowIndex];
                    // if(rowIndex == 12 || rowIndex == 29 || rowIndex == 46) {
                    //     return {
                    //         rowspan: 1, //行
                    //         colspan: 2 //列
                    //     };
                    // }else if(rowIndex == 47) {
                    //     return {
                    //         rowspan: 0, //行
                    //         colspan: 0 //列
                    //     };
                    // }else {
                        return {
                            rowspan: _row2, //行
                            colspan: 1 //列
                        };
                    // }
                }
            },
            // 获取合并的数组
            getRowSpan(data) {
                this.rowSpanArrYear = [];
                this.rowSpanArrQuarter = [];
                this.rowSpanArrMonth = [];
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        this.rowSpanArrYear.push(1);
                        this.rowSpanArrQuarter.push(1);
                        this.rowSpanArrMonth.push(1);
                        this.positionYear = 0
                        this.positionQuarter = 0;
                        this.positionMonth = 0;
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        // 年
                        if (data[i][0] === data[i - 1][0]) {
                            this.rowSpanArrYear[this.positionYear] += 1;
                            this.rowSpanArrYear.push(0);
                        } else {
                            this.rowSpanArrYear.push(1);
                            this.positionYear = i;
                        }
                        // 季度
                        if (data[i][1] === data[i - 1][1]) {
                            this.rowSpanArrQuarter[this.positionQuarter] += 1;
                            this.rowSpanArrQuarter.push(0);
                        } else {
                            this.rowSpanArrQuarter.push(1);
                            this.positionQuarter = i;
                        }
                        // 月
                        if (data[i][2] === data[i - 1][2]) {
                            this.rowSpanArrMonth[this.positionMonth] += 1;
                            this.rowSpanArrMonth.push(0);
                        } else {
                            this.rowSpanArrMonth.push(1);
                            this.positionMonth = i;
                        }
                    }
                }
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .tb_title{
        // width: 430px;
        text-align: center;
        margin: 5px auto;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .tb_dw{
        font-size: 13px;
        position: absolute;
        top: 84px;
        right: 40px;
    }

    .tb_left{
        font-size: 13px;
        position: absolute;
        top: 84px;
        left: 40px;
    }

    .hj_cl{
        font-weight: 700;
    }

    .hj_cl_blue {
        color: #1890ff !important;
        font-weight: 700;
    }

    .el-table__footer-wrapper tbody td.el-table__cell{
        font-weight: 700;
    }
    .el-table .el-table__footer-wrapper .cell{
        font-weight: 700;
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        line-height: 30px;
    }

    .vue-treeselect {
        width: 215px;
        height: 30px;
        .vue-treeselect__control {
            height: 30px;
            .el-form-item--medium .el-form-item__content {
                line-height: 30px;
                .vue-treeselect__placeholder, .vue-treeselect__single-value {
                    line-height: 30px;
                }
            }
        }
    }

    .el-table th.gutter{
        display: table-cell!important;
    }

</style>
